<template>
        <el-menu 
        :collapse="!$store.state.isCollapse"
        :collapse-transition="false" 
        @select ="handleSelect"
        unique-opened
        >
            <h1 
            class="w100% h56px flex justify-center line-height-56px cursor-pointer"
            >
                {{  $store.state.isCollapse ? '后台管理中心':'后台'  }}
            </h1>
            <el-menu-item index="/home">
                    <el-icon>
                        <location />
                    </el-icon>
                    <span>{{ $t('menus.home') }}</span>
            </el-menu-item>

            <el-sub-menu index="/UserCenter">
                <template #title>
                    <el-icon>
                        <location />
                    </el-icon>
                    <span>{{ $t('menus.userCenter') }}</span>
                </template>
                <el-menu-item 
                    v-for="item in isUserCenter" 
                    :index="item.path" 
                    @click='handleMenuItem(item)'
                >
                    {{ item.title }}
                </el-menu-item>
            </el-sub-menu>

            <el-sub-menu index="/userManage">
                <template #title>
                    <el-icon>
                        <location />
                    </el-icon>
                    <span>{{ $t('menus.userManage') }}</span>
                </template>
                <el-menu-item 
                    v-for="item in isUserManage" 
                    :index="item.path" 
                    @click='handleMenuItem(item)'
                >
                    {{ item.title }}
                </el-menu-item>
            </el-sub-menu>

            <el-sub-menu index="/uploading">
                <template #title>
                    <el-icon>
                        <location />
                    </el-icon>
                    <span>上传模块</span>
                </template>
                <el-menu-item 
                    v-for="item in isUploading" 
                    :index="item.path" 
                    @click='handleMenuItem(item)'
                >
                    {{ item.title }}
                </el-menu-item>
            </el-sub-menu>

            <el-sub-menu index="/systemTools">
                <template #title>
                    <el-icon>
                        <location />
                    </el-icon>
                    <span>系统工具</span>
                </template>
                <el-menu-item 
                    v-for="item in isSystemTools" 
                    :index="item.path" 
                    @click='handleMenuItem(item)'
                >
                    {{ item.title }}
                </el-menu-item>
            </el-sub-menu>

        </el-menu>
</template>

<script setup>
import { ref ,onMounted} from 'vue'
import { useRouter } from 'vue-router'
import { useStore } from 'vuex'

const router = useRouter()
const store = useStore()

onMounted(()=>{
    //获取路由信息
    const gainRouter = router.getRoutes()
    //拿到路径和标题
    const gainUserCenterChildren = gainRouter.find(item=>item.path === '/UserCenter').children
    const gainUserCenterPath = gainUserCenterChildren.map(item=>({
        path: '/UserCenter/' + item.path,
        title: item.meta.title,
        name: item.name
    }))
    isUserCenter.value = gainUserCenterPath

    const gainUserManageChildren = gainRouter.find(item=>item.path === '/userManage' ).children
    const gainUserManagePath = gainUserManageChildren.map(item=>({
        path: '/userManage/' + item.path,
        title: item.meta.title,
        name: item.name
    }))
    isUserManage.value = gainUserManagePath

    const gainUploadingChildren = gainRouter.find(item=>item.path === '/uploading' ).children
    const gainUploadingPath = gainUploadingChildren.map(item=>({
        path: '/uploading/' + item.path,
        title: item.meta.title,
        name: item.name
    }))
    isUploading.value = gainUploadingPath

    const gainSystemToolsChildren = gainRouter.find(item=>item.path === '/systemTools' ).children
    const gainSystemToolsPath = gainSystemToolsChildren.map(item=>({
        path: '/systemTools/' + item.path,
        title: item.meta.title,
        name: item.name
    }))
    isSystemTools.value = gainSystemToolsPath
})
//用户中心数组
const isUserCenter = ref([])
//用户管理
const isUserManage = ref([])
//上传模块
const isUploading = ref([])
//系统工具
const isSystemTools = ref([])
//路由跳转
const handleSelect = (index, indexPath,item)=>{
    router.push(index)
}
//tagview导航栏
const handleMenuItem =(item)=>{
    store.commit('selectMenu',item)
}

</script>

<style scoped lang="scss">
.el-menu{
    width: 100%;
    height: 100%;
    border: none;
    background-color: #545c64;
    .el-sub-menu{
        :deep(.el-sub-menu__title){
            color: white;
        }
    }
    :deep(.el-sub-menu__title:hover){
        background-color: #475157;
    }
    .el-menu-item{
        color: white;
        background-color: #545c64;
    }
    .el-menu-item:hover{
        background-color: #475157;
    }
}




</style>